import Channel from '@/components/Channel';
import { useAppSelector } from '@/store';
import { getArtilesByIdAction } from '@/store/action/articles';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import ArticleList from './components/ArticleList';
import styles from './index.module.scss';
// 文章首页，回跳tab滚动条记录位置
export default function Home() {
  const dispatch = useDispatch();
  const { currentId, userChanList } = useAppSelector((state) => state.channel);
  const { articleList } = useAppSelector((state) => state.article);
  const list = articleList[currentId]?.results || [];
  useEffect(() => {
    if (list.length) {
      return;
    }
    // 当channel_id改变时，再次请求数据
    // 4. 当currentId变化时，主动再发一次请求
    dispatch(getArtilesByIdAction({ channel_id: currentId }));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch, currentId]);
  return (
    <div className={styles.root}>
      {/* 频道 */}
      <Channel />

      {/* 列表 */}
      {userChanList.map((item) => (
        <div
          key={item.id}
          className="channel-list"
          // 当激活不同的频道时，显示不同的div */
          style={{ display: currentId === item.id ? 'block' : 'none' }}
        >
          <ArticleList />
        </div>
      ))}
    </div>
  );
}
